<template>
  <div class="app-main-container">
    <div class="dinner_wrap">
      <div class="app-main-title">
        {{ $t('message.dc') }}
        <div class="goback" @click="goBack">
          <i class="el-icon-refresh-left" /> {{ $t('message.fhsyy') }}
        </div>
      </div>
      <div class="app_main df">
        <div class="sell_left">
          <el-input v-model="goodsName" :placeholder="$t('message.qsr') + $t('message.spmc')" class="input-with-select" clearable @change="nameChage">
            <el-button slot="append" icon="el-icon-search" @click="handleCurrentChange(1)" />
          </el-input>
          <div class="goods_tabs_wrap">
            <div class="list_wrap">
              <img class="btn btn_left" src="@/assets/images/ic_left.png" alt="" @click="moveTabs('left')">
              <img class="btn btn_right" :class="{shadow: tabsBtnShadow}" src="@/assets/images/ic_right.png" alt="" @click="moveTabs('right')">
              <div id="scrollContent" class="list">
                <span class="empty" />
                <span v-for="item in classList" :key="item.id" :class="{ active: item.id === selectType.id }" class="item" @click="handleClick(item)">{{ item.name }}</span>
                <span class="empty" />
              </div>
            </div>
          </div>
          <div class="goods_wrap">
            <div class="good_content">
              <div v-for="(item, index) in goodsLsit" :key="index" class="card_style" @click="goodsItemClick(item)">
                <img :src="item.picture" class="goods-image" alt="">
                <div class="right-items">
                  <div class="goods-name">
                    {{
                      item.name.length > 13
                        ? item.name.slice(0, 13) + "..."
                        : item.name
                    }}
                  </div>
                  <div class="stock-style">
                    <span class="stock-title-style">{{ $t('message.kucun') }}：</span>
                    <span class="stock-value-style">{{ item.stock || $t('message.bx') }}</span>
                  </div>
                  <div class="add-module-style">
                    <div class="secondColor">{{ $t('message.rmbfh') }}{{ item.price }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <Paginations :total="totalCount" :page-size="pagination.rows" :page="pagination.page" :integrated="false" @current-change="handleCurrentChange" />
        </div>
        <div class="sp" />
        <div class="flex1">
          <div class="member_wrap">
            <div class="df">
              <MemberSearch class="flex1" @clear="memberClear" @select="memberSelect" />
              <el-button class="ml10" type="primary" @click="memberClear">{{ $t('message.sk') }}</el-button>
            </div>
            <div class="mt20 mb20">
              <div class="df">
                <span class="flex1">{{ $t('message.name') }}：{{ memberInfo.nickName || '-' }}</span>
                <span class="flex1">{{ $t('message.sjh') }}：{{ memberInfo.phone || '-' }}</span>
                <span class="flex1">{{ $t('message.hydj') }}：{{ memberInfo.cardName || '-' }}</span>
              </div>
              <div class="df mt20">
                <span class="flex1">{{ $t('message.czje') }}：{{ memberInfo.rechargeMoney || '0.00' }}</span>
                <span class="flex1">{{ $t('message.zsye') }}：{{ memberInfo.giveMoney || '0.00' }}</span>
                <span class="flex1" />
              </div>
            </div>
          </div>
          <div v-if="extraMealFlag > 0" class="order_tabs mb30">
            <div class="item" :class="{active: orderTabs == '0'}" @click="orderTabsClick('0')">
              <span>{{ $t('message.jc') }}</span>
            </div>
            <div class="item" :class="{active: orderTabs == '1'}" @click="orderTabsClick('1')">
              <span>{{ $t('message.yxd') }}</span>
            </div>
          </div>
          <template v-if="orderTabs=='0'">
            <template v-for="item,index in cartList">
              <div v-if="index === 0" :key="item.orderId" class="tables_wrap">
                <div v-if="item.status == '0'" class="tables">
                  <el-table ref="table" :data="item.goodsList" element-loading-text="Loading" border fit height="100%" :header-row-class-name="'table-header'" class="doumee-element-table">
                    <el-table-column align="center" :label="$t('message.caipin')" min-width="100" prop="name" show-overflow-tooltip />
                    <el-table-column align="center" :label="$t('message.guige')" min-width="80" prop="goodsSkuInfo" show-overflow-tooltip />
                    <el-table-column align="center" :label="$t('message.dprice')" min-width="60" prop="price" />
                    <el-table-column align="center" :label="$t('message.num')" width="150">
                      <template slot-scope="scope">
                        <el-input-number v-model="scope.row.num" :min="1" :max="scope.row.stock" @change="(newValue,oldValue)=>changeCartItemNum(scope.row,newValue, oldValue)" />
                      </template>
                    </el-table-column>
                    <el-table-column align="center" :label="$t('message.xiaoji')" min-width="60">
                      <template scope="{ row }">
                        {{ +row.price * row.num }}
                      </template>
                    </el-table-column>
                    <el-table-column align="center" :label="$t('message.caozuo')" min-width="60">
                      <template scope="{ row }">
                        <el-button type="text" class="secondColor" @click="delCart(row.cartId)">{{ item.status == 0 ? $t('message.del'): $t('message.tucan') }}
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </template>
          </template>
          <template v-if="orderTabs=='1'">
            <div class="tables_wrap" style="overflow-Y: auto;">
              <template v-for="item in cartList">
                <template v-if="item.status == '1'">
                  <el-table :key="item.orderId" ref="table" :data="item.goodsList" element-loading-text="Loading" border fit :header-row-class-name="'table-header'" class="doumee-element-table">
                    <el-table-column align="center" :label="$t('message.caipin')" min-width="120" prop="name" show-overflow-tooltip />
                    <el-table-column align="center" :label="$t('message.guige')" min-width="80" prop="goodsSkuInfo" show-overflow-tooltip />
                    <el-table-column align="center" :label="$t('message.dprice')" min-width="60" prop="price" />
                    <el-table-column align="center" :label="$t('message.num')" min-width="100" prop="num" />
                    <el-table-column align="center" :label="$t('message.xiaoji')" min-width="60">
                      <template scope="{ row }">
                        {{ +row.price * row.num }}
                      </template>
                    </el-table-column>
                    <el-table-column align="center" :label="$t('message.caozuo')" min-width="60">
                      <template scope="{ row }">
                        <el-button type="text" class="secondColor" @click="delCart(row.cartId)">{{ item.status == 0 ? $t('message.del'): $t('message.tucan') }}
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div :key="item" class="order-bottom">
                    <div>
                      <span class="price mr20">{{ $t('message.ddhj') }}：{{ item.amount }}</span>
                      <span class="placeholder6">{{ $t('message.xdsj') }}：{{ item.orderTime }}</span>
                    </div>
                    <div>
                      <el-button v-if="item.status == 1" v-preventReClick @click="print(item.orderId)">{{ $t('message.dayin') }}</el-button>
                    </div>
                  </div>
                </template>
              </template>
            </div>
          </template>
          <div v-if="cartList.length" class="final_wrap">
            <div class="price_wrap">
              <div class="sum-style">
                <span class="sum-title">{{ $t('message.ddje') }}</span>
                <span class="sum-value secondColor">{{ totalPrice }}</span>
              </div>
            </div>
            <div class="sub_order">
              <el-input v-model="remark" :placeholder="$t('message.qsr') + $t('message.ddbz')" />
              <el-button v-preventReClick :loading="subLoading" class="ml20" type="primary" @click="settleAccount">{{ $t('message.ddjs') }} </el-button>
              <el-button v-if="orderTabs === '0'" v-preventReClick @click="putOrder">{{ $t('message.xiadan') }}</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :title="$t('message.ggxq')" :visible.sync="selectSku" width="500px" :close-on-click-modal="modalDialog" :close-on-press-escape="modalDialog" @close="skuClose">
      <div class="sku_info">
        <img class="head" :src="tempGoods.showPicture" alt="">
        <div class="content">
          <div class="name">{{ tempGoods.name }}</div>
          <div class="stock">{{ $t('message.kucun') }}：{{ tempGoods.stock }}</div>
          <div class="secondColor">{{ $t('message.rmbfh') }}{{ tempGoods.price }}</div>
        </div>
      </div>
      <div v-for="(item, i) in tempGoods.skuList" :key="item.id" class="sku-style">
        <div class="sku-title-style">{{ item.name }}</div>
        <div class="sku-item-style">
          <div v-for="(val, index) in item.valList" :key="val.id" class="sku-val" :class="index == selectSkuList[i] ? 'sku-val-sel' : ''" @click="selectSkuAction(i, index)">
            {{ val.val }}
          </div>
        </div>
      </div>
      <div>
        {{ $t('message.num') }}
        <el-input-number v-model="tempNum" :min="1" :max="Number(tempGoods.stock)" :label="$t('message.num')" />
      </div>
      <div slot="footer">
        <el-button @click="selectSku = false">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick type="primary" @click="addshopCartAction(tempGoods.id,tempNum)">{{ $t('message.qdtc') }}</el-button>

      </div>
    </el-dialog>
    <orderDialog ref="child" @openSuccess="subLoading = false" @orderSuccess="orderSuccess" @cancelOrder="cancelOrder" />
    <GoodsTem v-if="isPrint" ref="GoodsTemRef" />
  </div>
</template>

<script>
import {
  goodsClassifyListVenue,
  goodsListVenue,
  addGoodsCarts,
  goodsCartList,
  goodsEditQuery,
  delGoodsCarts,
  goodsCartXD,
  printOrder
} from '@/api'
import store from '@/store'
import orderDialog from '@/components/order'
import MemberSearch from '@/components/MemberSearch'
import GoodsTem from '@/components/printTem/goods.vue'
export default {
  components: { orderDialog, MemberSearch, GoodsTem },
  data () {
    return {
      subLoading: false,
      isPrint: false,
      extraMealFlag: 0,
      remark: '',
      tabsBtnShadow: true,
      totalDistance: 0,
      transformX: 0,
      limitCount: 0,
      selectType: {
        id: '-1'
      },
      memberInfo: {},
      activeGoods: {},
      orderTabs: '0',
      goodsRestaurantId: '',
      modalDialog: store.getters.dialog,
      goodsName: '',
      classList: [],
      selId: '0',

      goodsLsit: [],
      pagination: {
        page: 1,
        rows: 30
      },
      totalCount: 0,
      tempGoods: {},
      tempNum: 1,
      selectSkuList: [],
      selectSku: false,

      cartList: [],
      cartListTemp: [],
      cartNum: 0,
      totalPrice: 0
    }
  },
  created () {
    this.goodsRestaurantId = this.$route.query.goodsRestaurantId || ''
    goodsClassifyListVenue({
      param: {
        saleType: 1,
        goodsRestaurantId: this.goodsRestaurantId,
        venueId: sessionStorage.getItem('venueId')
      }
    }).then((res) => {
      if (res.errorCode === '000000') {
        this.classList = [
          { id: '-1', name: this.$t('message.qb'), sort: 0 },
          ...res.recordList
        ]
      }
      console.log(this.classList)
    })

    this.getOrderList()
    this.handleCurrentChange(1)
  },
  activated () {
    this.$refs.table.doLayout()
  },
  methods: {
    orderTabsClick (name) {
      this.orderTabs = name
    },
    orderSuccess () {
      this.getOrderList()
      this.$router.go(-1)
    },
    cancelOrder () {
      this.getOrderList()
    },
    memberClear () {
      this.memberInfo = {}
    },
    moveTabs (direction) {
      const scrollContent = document.querySelector('#scrollContent')
      if (this.limitCount === 0) {
        const scrollWidth = scrollContent.scrollWidth // 一共可以滚动的宽度
        const clientWidth = scrollContent.clientWidth // 本身占据的宽度
        this.totalDistance = scrollWidth - clientWidth
      }
      console.log(this.totalDistance)
      if (this.totalDistance > 0 && direction === 'right') {
        this.transformX = this.transformX - 450
        scrollContent.style.transform = `translate(${this.transformX}px)`
        this.totalDistance = this.totalDistance - 450
      } else if (this.totalDistance < 0 && direction === 'left') {
        this.transformX = this.transformX + 450
        scrollContent.style.transform = `translate(${this.transformX}px)`
        this.totalDistance = this.totalDistance + 450
      }
      console.log(this.totalDistance)
      this.tabsBtnShadow = this.totalDistance > -40
      this.limitCount += 1
    },
    memberSelect (item) {
      this.memberInfo = item
    },
    changeCartItemNum (item, newValue, oldValue) {
      const goodsSkuInfo = item.goodsSkuInfo || ''
      const value = newValue - oldValue
      this.addshopCartAction(item.goodsId, value, goodsSkuInfo)
    },
    goodsItemClick (item) {
      item = JSON.parse(JSON.stringify(item))
      if (item.stock < 1) {
        return this.$message.info(this.$t('message.zsspkc'))
      }
      if (item.goodsSkuIds) {
        goodsEditQuery({
          param: { id: item.id }
        }).then((res) => {
          if (res.errorCode !== '000000') return
          this.tempGoods = res.record
          this.tempGoods.stock = res.record.stock || '不限'
          this.selectSku = true
          this.selectSkuList = []
          res.record.skuList.forEach((item, index) => {
            this.$set(this.selectSkuList, index, 0)
          })
        })
      } else {
        this.addshopCartAction(item.id)
      }
    },
    nameChage (v) { },
    /**
     * @desc 获取购物车列表
     */
    getOrderList () {
      goodsCartList({
        param: {
          goodsTableId: this.$route.query.id,
          venueId: sessionStorage.getItem('venueId')
        }
      }).then((res) => {
        if (res.errorCode !== '000000') return
        this.cartList = res.record.cartList
        const cartList = []
        this.extraMealFlag = 0
        this.cartList.forEach(item => {
          if (item.status === '0') {
            item.goodsList.forEach(item2 => {
              if (item2.stock == null) {
                item2.stock = Infinity
              } else {
                item2.stock = Number(item2.stock)
              }
              cartList.push(item2)
            })
          } else {
            item.goodsList.forEach(item2 => {
              this.extraMealFlag += 1
            })
          }
        })
        this.cartListTemp = cartList
        this.cartNum = res.record.totalNum
        this.totalPrice = res.record.totalPrice
        this.handleCurrentChange()
      })
    },
    /**
     * @description 选择分类
     * @param {*} item
     */
    // handleClick(tab, event) {
    //   this.selId = tab.id
    //   this.handleCurrentChange(1)
    // },
    handleClick (tab, event) {
      this.selectType = tab
      this.handleCurrentChange()
    },
    /**
     * @description 加入购物车
     * @param {@} item
     */
    selectSkuAction (index, val) {
      this.$set(this.selectSkuList, index, val)
    },

    handleCurrentChange (page) {
      const pagination = this.pagination
      if (page) {
        this.pagination.page = page
        pagination.page = page
      }
      const classId = this.selectType.id === '-1' ? '' : this.selectType.id
      goodsListVenue({
        pagination,
        param: {
          name: this.goodsName,
          classifyId: classId,
          status: '1',
          type: '1',
          venueId: sessionStorage.getItem('venueId'),
          saleType: 1,
          goodsRestaurantId: this.goodsRestaurantId
        }
      }).then((res) => {
        if (res.errorCode !== '000000') return
        this.goodsLsit = res.recordList
        this.goodsLsit.forEach(item => {
          item.isSelect = false
          this.cartListTemp.forEach(cart => {
            if (cart.goodsId === item.id) {
              item.isSelect = true
            }
          })
        })

        this.totalCount = res.totalCount
      })
    },
    skuClose () {
      this.tempNum = 1
      this.selectSkuList = []
    },
    goBack () {
      this.$router.replace(
        `/application/ordering?activeTwo=${this.goodsRestaurantId}`
      )
    },
    addshopCartAction (id, num, sku) {
      let goodsSkuInfo = ''
      const infoArr = []
      if (this.selectSkuList) {
        // this.selectSkuList.forEach(e => {
        //   infoArr.push(this.tempGoods.skuList[e].valList[this.selectSkuList[e]].val)
        // })
        for (const key in this.selectSkuList) {
          infoArr.push(
            this.tempGoods.skuList[key].valList[this.selectSkuList[key]].val
          )
        }
        goodsSkuInfo = infoArr.join('/')
        console.log(infoArr)
      }
      addGoodsCarts({
        param: {
          goodsTableId: this.$route.query.id,
          venueId: sessionStorage.getItem('venueId'),
          goodsList: [
            {
              goodsId: id,
              num: num || 1,
              goodsSkuInfo: sku || goodsSkuInfo
            }
          ]
        }
      }).then((res) => {
        if (res.errorCode !== '000000') return
        this.orderTabs = '0'
        this.selectSku = false
        this.tempNum = 1
        this.getOrderList()
      })
    },
    /**
     * 删除购物车
     * @param {} id
     */
    delCart (id) {
      delGoodsCarts({
        param: { id }
      }).then((res) => {
        if (res.errorCode === '000000') {
          this.$message.success(this.$t('message.delcg'))
          this.getOrderList()
        } else {
          this.$message.success(res.errorMsg)
        }
      })
    },
    /**
     * @desc 下单
     */
    putOrder () {
      if (this.cartListTemp.length === 0) {
        return this.$message.warning(this.$t('message.qxxzcp'))
      }

      this.$prompt(this.$t('message.qsr') + this.$t('message.bz'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx')
      })
        .then(({ value }) => {
          goodsCartXD({
            param: {
              goodsTableId: this.$route.query.id,
              remark: value
            }
          }).then((res) => {
            if (res.errorCode === '000000') {
              this.$message.success(this.$t('message.xdcg'))
              // if (res.record.isPrint && res.record.orderId) {
              //   this.print(res.record.orderId)
              // }
              this.orderTabs = '1'
              this.getOrderList()
            } else {
              this.$message.success(res.errorMsg)
            }
          })
        })
        .catch(() => { })
    },
    settleAccount () {
      if (!this.cartList.length) {
        this.$message.warning(this.$t('message.qxtjspdgwc'))
        return
      }
      const goodsList = []
      this.cartList.forEach((item) => {
        item.goodsList.forEach((goods) => {
          goodsList.push({
            id: goods.goodsId,
            goodsNum: goods.num,
            skuInfo: goods.goodsSkuInfo
          })
        })
      })
      const config = { goodsList, id: this.$route.query.id, memberId: this.memberInfo.id, remark: this.remark }
      this.subLoading = true
      try {
        this.$refs.child.continuePay(config, 'dinner')
        setTimeout(() => {
          this.subLoading=false
        }, 2000);
      } catch (error) {
        this.subLoading = false
      }
    },
    print (workId) {
      this.isPrint = true
      printOrder({
        param: {
          venueId: sessionStorage.getItem('venueId'),
          templateCode: 'GOODSTPML3',
          workId
        }
      }).then((res) => {
        // if (res.record && res.record.isPrint === '1' && res.record.dataList && res.record.dataList.length > 0) {
        //   res.record.dataList.forEach(item => {
        //     this.$refs.GoodsTemRef.obj = { ...res.record.dataList[0], isXd: 1 }
        //     setTimeout(() => {
        //       this.$refs.GoodsTemRef.print()
        //     }, 300)
        //     setTimeout(() => {
        //       this.isPrint = false
        //     }, 500)
        //   })
        // } else {
        //   this.$message.success(this.$t('message.dycg'))
        // }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.app-main-container {
  height: calc(100% - 40px);
}
.tables_wrap {
  height: calc(100% - 310px);
  .tables {
    height: 100%;
  }
}

.el_tabs {
  height: calc(100% - 206px);
}
.order_tabs {
  display: flex;
  border-bottom: 2px solid #e4e7ed;
  .item {
    height: 40px;
    line-height: 40px;
    margin-right: 60px;
    font-weight: 500;
    border-bottom: 2px solid E4E7ED;
    cursor: pointer;
  }
  .active {
    color: $primaryColor;
    border-bottom: 2px solid $primaryColor;
  }
}
.goods_tabs_wrap {
  width: 100%;
  margin: 16px 0 20px;
  position: relative;
  overflow: hidden;
  .list_wrap {
    overflow-x: hidden;
    .list {
      display: flex;
      .empty {
        width: 40px;
        box-sizing: border-box;
        flex-shrink: 0;
      }
      .item {
        flex-shrink: 0;
        height: 35px;
        line-height: 35px;
        padding: 0 16px;
        background-color: #f5f7fc;
        border-radius: 2px;
        margin-right: 10px;
        cursor: pointer;
      }
      .active {
        background-color: $primaryColor;
        color: #fff;
      }
    }
  }

  .btn {
    height: 36px;
    width: 30px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 300;
    cursor: pointer;
  }
  .btn_left {
    left: 0;
  }
  .btn_right {
    right: 0;
  }
  .shadow {
    box-shadow: -2px -2px 4px 0px rgba(0, 0, 0, 0.08);
  }
}
.final_wrap {
  background: #f7f7f7;
  border-radius: 2px;
  padding: 20px;
  .price_wrap {
    display: flex;
    margin-bottom: 20px;
    .sum-style {
      font-size: 16px;
      margin-right: 75px;
      .sum-title {
        color: #222;
      }
      .sum-value {
        font-size: 17px;
        font-weight: 700;
      }
    }
  }
  .sub_order {
    display: flex;
  }
}
.sp {
  margin: 0 20px;
  width: 1px;
  height: 100%;
  background-color: #dfe2e8;
}
.sell_left {
  width: 620px;
  height: 100%;
  .goods_wrap {
    height: calc(100% - 160px);
    overflow: auto;
    .good_content {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
    }
  }
}
.dinner_wrap {
  background-color: #fff;
  height: 100%;
  .app_main {
    height: calc(100% - 70px);
  }
  .class-list {
    overflow: scroll;
    height: 40px;
    font-size: 14px;
    text-align: center;
    display: flex;
    .class-item-nor {
      border-radius: 4px;
      background-color: #fff;
      color: #111;
      height: 24px;
      line-height: 24px;
      width: 80px;
      margin-right: 15px;
      cursor: pointer;
    }
    .class-item-sel {
      background-color: rgb(148, 209, 244);
      color: #fff;
    }
  }
  .goods-contant {
    display: flex;

    flex-wrap: wrap;
    margin-top: 10px;
    .goods-item {
      width: calc(33% - 18px);
      background-color: #f7f7f7;
      margin: 8px;
      height: 110px;
      display: flex;
      box-sizing: border-box;
      padding: 10px;
      position: relative;

      img {
        height: 100%;
        aspect-ratio: 1;
        object-fit: contain;
      }
      .goods-message {
        margin-left: 10px;
        font-size: 14px;
        .goods-name {
          margin-top: 10px;
          margin-bottom: 10px;
        }
        .goods-stock {
          font-size: 12px;
          color: #666;
        }
        .goods-price {
          font-size: 18px;
          color: rgb(199, 42, 41);
          margin-top: 15px;
          font-weight: 500;
          &:before {
            // content: "￥";
          }
        }
      }
      .add-btn {
        position: absolute;
        right: 10px;
        bottom: 10px;
        width: 80px;
        text-align: center;
        cursor: pointer;
      }
    }
  }
  .sku-goods-name {
    font-size: 16px;
    font-weight: 500;
    color: #111;
    margin-bottom: 20px;
  }
  .sku-style {
    margin-bottom: 20px;

    .sku-title-style {
      color: #222;
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 10px;
    }
    .sku-item-style {
      display: flex;
      flex-wrap: wrap;
      .sku-val {
        font-size: 13px;
        padding: 5px 10px;
        color: #333;
        border: #333 solid 0.5px;
        background-color: #fff;
        margin-right: 5px;
        border-radius: 4px;
        cursor: pointer;
        margin-bottom: 5px;
      }
      .sku-val-sel {
        color: rgb(230, 199, 25);
        border: rgb(230, 199, 25) solid 0.5px;
        background-color: rgba(230, 199, 25, 0.1);
      }
    }
  }
  .shop-cart {
    border-top: #f7f7f7 solid 10px;
    padding: 20px;
    background-color: #fff;
    .shop-cart-header {
      display: flex;
      justify-content: space-between;
      .header-right {
        display: flex;
        .total-price {
          line-height: 40px;
          color: rgb(199, 42, 41);
          font-size: 18px;
          font-weight: 500;
          margin-right: 20px;
          &:before {
            // content: "订单合计：";
            color: #111;
            font-size: 14px;
            font-weight: normal;
          }
        }
      }
    }
  }

  .order-title {
    font-size: 18px;
    font-weight: 500;
    color: #111;
    background-color: #fff;
    height: 40px;
    line-height: 40px;
  }
  .sub-title {
    font-size: 16px;
    color: #333;
    height: 30px;
    line-height: 30px;
  }
  .order-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    height: 60px;

    background-color: #fff;
    border-left: rgb(223, 225, 230) solid 1px;
    border-right: rgb(223, 225, 230) solid 1px;
    border-bottom: rgb(223, 225, 230) solid 1px;
    .price {
      color: orange;
    }
  }
}
.card_style {
  width: calc(33.33% - 8px);
  height: 80px;
  border-radius: 2px;
  border: 1px solid #dfe2e8;
  box-sizing: border-box;
  display: flex;
  margin-right: 12px;
  margin-bottom: 10px;
  padding: 10px;
  cursor: pointer;
  &:nth-of-type(3n) {
    margin-right: 0;
  }
  img {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    padding: 0;
    border-radius: 2px;
  }
  .right-items {
    display: flex;
    flex-flow: column;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    .goods-name {
      color: #222;
      font-size: 14px;
      line-height: 14px;
    }
    .stock-style {
      font-size: 12px;
      line-height: 12px;
      .stock-title-style {
        color: #999;
      }
    }
  }
}
.selected {
  background: #f4f7fc;
  border-radius: 2px;
  border: 1px solid $primaryColor;
}
.sku-goods-name {
  font-size: 16px;
  font-weight: 500;
  color: #111;
  margin-bottom: 20px;
}
.sku-style {
  margin-bottom: 20px;

  .sku-title-style {
    color: #222;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
    margin-top: 24px;
  }
  .sku-item-style {
    display: flex;
    flex-wrap: wrap;
    .sku-val {
      height: 38px;
      line-height: 38px;
      background: #f7f7f7;
      padding: 0 16px;
      cursor: pointer;
      margin-right: 8px;
    }
    .sku-val-sel {
      color: #fff;
      background-color: $primaryColor;
    }
  }
}
.sku_info {
  display: flex;
  .head {
    width: 60px;
    height: 60px;
    margin-right: 10px;
  }
  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .name {
      font-size: 14px;
    }
    .stock {
      font-size: 12px;
      color: #999999;
    }
  }
}
</style>
